import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let product_data = [{
  id: 1,
  name: 'AirPods',
  brand: 'Apple',
  image: './images/airPods.jpg',
  imageDetail: './images/airPods_detail.jpg',
  sales: 10000,
  cost: 1288,
  color: '白色'
},
{
  id: 2,
  name: 'BeatsX 入耳式耳机',
  brand: 'Beats',
  image: './images/BeatsX_1.jpg',
  imageDetail: './images/BeatsX_1_detail.jpg',
  sales: 11000,
  cost: 1188,
  color: '白色'
},
{
  id: 3,
  name: 'Beats Solo3 Wireless 头戴式式耳机',
  brand: 'Beats',
  image: './images/BeatsX_2.jpg',
  imageDetail: './images/BeatsX_2_detail.jpg',
  sales: 5000,
  cost: 2288,
  color: '金色'
},
{
  id: 4,
  name: 'Beats Pill+ 便携式扬声器',
  brand: 'Beats',
  image: './images/BeatsX_3.jpg',
  imageDetail: './images/BeatsX_3_detail.jpg',
  sales: 3000,
  cost: 1888,
  color: '红色'
},
{
  id: 5,
  name: 'Sonos PLAY:1 无线扬声器',
  brand: 'Sonos',
  image: './images/sonos.jpg',
  imageDetail: './images/sonos_detail.jpg',
  sales: 8000,
  cost: 1578,
  color: '白色'
},
{
  id: 6,
  name: 'Powerbeats3 by Dr. Dre Wireless 入耳式耳机',
  brand: 'Beats',
  image: './images/PowersBeatsX.png',
  imageDetail: './images/PowerBeatsX_detail.jpg',
  sales: 12000,
  cost: 1488,
  color: '金色'
},
{
  id: 7,
  name: 'Beats EP 头戴式耳机',
  brand: 'Beats',
  image: './images/BeatsX_4.jpg',
  imageDetail: './images/BeatsX_4_detail.jpg',
  sales: 25000,
  cost: 788,
  color: '蓝色'
},
{
  id: 8,
  name: 'B&O PLAY BeoPlay A1 便携式蓝牙扬声器',
  brand: 'B&O',
  image: './images/bo_1.jpg',
  imageDetail: './images/bo_1_detail.jpg',
  sales: 15000,
  cost: 1898,
  color: '金色'
},
{
  id: 9,
  name: 'Bose® QuietComfort® 35 无线耳机',
  brand: 'Bose',
  image: './images/bose.jpg',
  imageDetail: './images/bose_detail.jpg',
  sales: 14000,
  cost: 2878,
  color: '蓝色'
},
{
  id: 10,
  name: 'B&O PLAY Beoplay H4 无线头戴式耳机',
  brand: 'B&O',
  image: './images/bo_2.jpg',
  imageDetail: './images/bo_2_detail.jpg',
  sales: 9000,
  cost: 2298,
  color: '金色'
}
]

let mystore = new Vuex.Store({
    state: {
      //商品列表信息
      productList: [
        
      ],
      //购物车数据，数组形式，数据元素为对象（商品id，购买数量count）
      cartList: [],
      //当前用户账号
      username: null,
      //登录状态
      loginStatus: false,
      mockUser: { username: "joker", password: "123123" }
    },
    getters: {
      //品牌、颜色筛选
      brands: state => {
          const brands = state.productList.map(item => item.brand);
          return getFilterArray(brands);
      },
      colors: state => {
          const colors = state.productList.map(item => item.color);
          return getFilterArray(colors);
      },
      getCount: state => {
          return state.count
      },
      products: state => state.productList
    },
    mutations: {
      //添加商品列表
      setProductList(state, data) {
          state.productList = data;
      },
      //添加购物车
      addCart(state, id) {
          const isAdded = state.cartList.find(item => item.id === id);
          //如果不存在设置购物车为1，存在count++
          if (isAdded) {
              isAdded.count++;
          } else {
              state.cartList.push({
                  id: id,
                  count: 1
              })
          }
      },
      //修改购物车商品数量
      editCartCount(state, payload) {
          const product = state.cartList.find(item => item.id === payload.id);
          product.count += payload.count;
      },
      //删除购物车商品
      deleteCart(state, id) {
          const index = state.cartList.findIndex(item => item.id === id);
          state.cartList.splice(index, 1)
      },
      //清空购物车
      emptyCart(state) {
          state.cartList = [];
      },
      // 更新用户名称
      getUser(state, username) {
          state.username = username;
          console.log("getUser ---> ", username)
      },
      //更新用户登录状态
      getLoginStatus(state, flag) {
          state.loginStatus = flag;
      }
    },
    actions: {
      //模拟异步请求商品列表
      getProductList(context) {
          context.commit('setProductList', product_data)
      },
      //用户购买，结算并清除购物车
      buy(context) {
          //生产环境使用ajax请求服务端响应后再清空购物车
          return new Promise(resolve => {
              setTimeout(() => {
                  context.commit('emptyCart');
                  resolve();
              }, 500);
          });
      },
      // async buy1({commit}){
      //   let fun = ()=>{
      //     console.log('假设这个是请求后端的函数');
      //   }
      //   let result = await fun()
      //   if(result.code===200){
      //     commit('emptyCart')
      //   }else{
      //     return Promise.reject(new Error('出现未知错误'))
      //   }
      // }
    },
    modules: {}
})

export default mystore

